<template>
	<view class="report-detail-container" v-if="detail">
		<view class="detail-header">
			<text class="header-title">工作报告详情</text>
		</view>
		
		<view class="detail-content">
			<view class="detail-row">
				<text class="label">姓名：</text>
				<text class="value">{{ detail.userName || '暂无' }}</text>
			</view>
			
			<view class="detail-row">
				<text class="label">日期：</text>
				<text class="value">{{ detail.aa || '暂无' }}</text>
			</view>
			
			<!-- 班前报告内容 -->
			<view class="detail-row" v-if="detail.bb">
				<text class="label">班前报告：</text>
				<view class="content-box">
					<text class="content-text">{{ detail.bb }}</text>
				</view>
			</view>
			
			<!-- 班后报告内容 -->
			<view class="detail-row" v-if="detail.cc">
				<text class="label">班后报告：</text>
				<view class="content-box">
					<text class="content-text">{{ detail.cc }}</text>
				</view>
			</view>
			
			<!-- 图片展示 -->
			<view class="detail-row" v-if="detail.dd">
				<text class="label">相关图片：</text>
				<view class="image-container">
					<image 
						:src="detail.dd" 
						mode="aspectFit" 
						@click="previewImage(detail.dd)" 
						class="detail-image"
					/>
				</view>
			</view>
			
			<!-- 班前报告评论 -->
			<view class="detail-row" v-if="detail.tobb">
				<text class="label">班前评论：</text>
				<view class="comment-box">
					<text class="comment-text">{{ detail.tobb }}</text>
				</view>
			</view>
			
			<!-- 班后报告评论 -->
			<view class="detail-row" v-if="detail.tocc">
				<text class="label">班后评论：</text>
				<view class="comment-box">
					<text class="comment-text">{{ detail.tocc }}</text>
				</view>
			</view>
			
			<!-- 其他字段信息 -->
			<view class="detail-row" v-if="detail.ee">
				<text class="label">备注：</text>
				<text class="value">{{ detail.ee }}</text>
			</view>
			
			<view class="detail-row" v-if="detail.ff">
				<text class="label">状态：</text>
				<text class="value">{{ detail.ff }}</text>
			</view>
		</view>
	</view>
	
	<view v-else class="loading-container">
		<view class="loading-text">加载中...</view>
	</view>
</template>

<script>
import { getYeji } from '@/api/system/yeji'

export default {
	data() {
		return {
			detail: null,
			loading: true
		}
	},
	onLoad(options) {
		if (options.id) {
			this.getDetail(options.id)
		} else {
			uni.showToast({
				title: '参数错误',
				icon: 'none'
			})
		}
	},
	methods: {
		async getDetail(id) {
			try {
				this.loading = true
				const res = await getYeji(id)
				if (res.code === 200 && res.data) {
					this.detail = res.data
				} else {
					uni.showToast({
						title: res.msg || '获取详情失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('获取详情失败：', error)
				uni.showToast({
					title: '获取详情失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		previewImage(url) {
			if (url) {
				uni.previewImage({ 
					urls: [url], 
					current: url 
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.report-detail-container {
	padding: 30rpx;
	background: #fff;
	border-radius: 16rpx;
	margin: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
	
	.detail-header {
		text-align: center;
		margin-bottom: 40rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #ebeef5;
		
		.header-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #303133;
		}
	}
	
	.detail-content {
		.detail-row {
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: column;
			
			.label {
				color: #409EFF;
				font-weight: bold;
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}
			
			.value {
				font-size: 30rpx;
				color: #333;
				word-break: break-all;
			}
			
			.content-box {
				background: #f8f9fa;
				border-radius: 12rpx;
				padding: 20rpx;
				margin-top: 10rpx;
				
				.content-text {
					font-size: 28rpx;
					color: #333;
					line-height: 1.6;
					white-space: pre-wrap;
					word-break: break-all;
				}
			}
			
			.comment-box {
				background: #f0f9ff;
				border-radius: 12rpx;
				padding: 20rpx;
				margin-top: 10rpx;
				border-left: 4rpx solid #409EFF;
				
				.comment-text {
					font-size: 28rpx;
					color: #333;
					line-height: 1.6;
					white-space: pre-wrap;
					word-break: break-all;
				}
			}
			
			.image-container {
				margin-top: 10rpx;
				
				.detail-image {
					width: 100%;
					max-width: 600rpx;
					height: 400rpx;
					border-radius: 12rpx;
					box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
				}
			}
		}
	}
}

.loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400rpx;
	
	.loading-text {
		font-size: 28rpx;
		color: #909399;
	}
}
</style>
